<template>
  <div class="contain">
    <character
      v-if="itemData.type == 1"
      class="cardStyle"
      :itemData="itemData"
    ></character>
    <tool
      v-else-if="itemData.type == 2"
      class="cardStyle"
      :itemData="itemData"
    ></tool>
    <button @click.stop="prev">👈</button>
    <button @click.stop="next">👉</button>
    <div>{{ parameter.cardTypeList[itemData.type] }} No:{{ cardNo + 1 }}</div>
    <button @click.stop="jump('-1')">返回</button>
  </div>
</template>
<script>
import character from "../../components/character.vue";
import tool from "../../components/tool.vue";
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
export default {
  data() {
    return {
      parameter,
      itemData: {},
      cardNo: 0,
      maxNum: 0,
    };
  },
  components: {
    character,
    tool,
  },
  methods: {
    jump(url, data) {
      if (url && (url == "-1")) {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: data });
      }
    },
    next() {
      if (this.cardNo + 1 == this.maxNum) return;
      console.log("下一个");
      this.cardNo++;
      // this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
    prev() {
      if (this.cardNo == 0) return;
      console.log("上一个");
      this.cardNo--;
      // this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
    loadCards() {
      if (!JSON.parse(localStorage.getItem("cards"))) {
        alert("未加载数据");
        this.$router.push({
          path: "excel",
        });
        return;
      }
      this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
      this.maxNum = JSON.parse(localStorage.getItem("cards")).length;
    },
  },
  watch: {
    cardNo(newNo, oldNo) {
      this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
  },
  mounted() {
    this.loadCards();
  },
};
</script>
<style scoped>
/* .contain{
} */
.cardStyle {
  margin: 10px auto;
}
</style>